<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link rel="stylesheet" href="../static/css/base.css" th:href="@{/css/base.css}">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}">
    <style>
        #login_but{
            width: 333.33px;
            margin-left: 30px;
        }
        .form-group{
            height: 76px;
        }
        .panel-body{
            padding: 10px 30px;

        }
        .msgs{
            color: red;
            margin: 6px 10px;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="container">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">
            </div>
            <!--  action="" th:action="@{/employee/login}"-->
            <form id="myForm" method="post" action="/employee/emp_login">
                <div class="panel loginbox">
                    <div class="text-center margin-big padding-big-top">
                        <h1>后台管理中心</h1>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big" name="username" id="username" placeholder="登录账号" onblur="verifyAccount()"/>
                                <span class="icon icon-user margin-small"></span>
                            </div>
                            <span class="msgs" id="name"></span>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="password" class="input input-big" name="password" id="password"  placeholder="登录密码" onblur="verfyPwd()" />
                                <span class="icon icon-key margin-small"></span>
                            </div>
                            <span class="msgs" id="pwd" th:text="${msg}"></span>
                        </div>
                    </div>
                    <div style="padding-bottom:30px;margin-top: -10px">
                        <!-- <span style="color: red;margin: 5px 30px;" ></span>-->
                        <input type="submit" id="login_but" class="button button-block bg-main text-big input-big" value="登录" onclick="return verifyForm()">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script>
    //鼠标验证事件
    //用户名
    function verifyAccount(){
        if ($("#username").val() == ""){
            $("#name").css("display","block");
            $("#name").html("请输入用户名！");
        }else {
            $("#name").css("display","none");
        }
    }
    //密码
    function verfyPwd(){
        if ($("#password").val() == ""){
            $("#pwd").css("display","block");
            $("#pwd").html("请输入密码！");
        }else {
            $("#pwd").css("display","none");
        }

    }



     });*/
    //表单验证
    function verifyForm(){
        if ($("#username").val() == ""){
            $("#name").css("display", "block");
            $("#name").html("用户名不能为空!");
            return false;
        }
        if ($("#password").val() == ""){
            $("#pwd").css("display", "block");
            $("#pwd").html("密码不能为空!");

            return false;
        }
        return true;
    }
</script>
</body>
</html>